<template>
  <div class="psyTest">
    <div class="scroll"
         ref="wrapper"
         :data="testList">
      <div>
        <nav-list :navList="navList" @changeNav="changeList"></nav-list>
        <swiper :list="swiper" v-show="nid == 1"></swiper>
        <div class="grp">
          <test-list :testList="testList" :nid="Number(nid)"></test-list>
        </div>
        <div class="load" v-if="testList.length" v-show="!loading">加载更多</div>
        <div class="load" v-show="loading">
          加载中...
        </div>
      </div>
    </div>
    <waiting v-if="!testList.length"></waiting>
  </div>
</template>

<script>
  import Bscroll from 'better-scroll'
  import Swiper from 'components/swiper/swiper'
  import NavList from 'components/navList/navList'
  import TestList from 'components/testList/testList'
  import Waiting from 'components/loading/loading'

  export default {
    name: 'PsyTest',
    data() {
      return {
        navList: [],
        swiper: [],
        offset: 0,
        pageSize: 10,
        nid: 1,
        testList: [],
        loading: false
      }
    },
    mounted() {
      this.getPsyTestInfo()
      this.scroll = new Bscroll(this.$refs.wrapper, {
        click:true,
        pullUpLoad: {
          threshold: -70
        }
      })
      this.scroll.on("pullingUp", function () {
        this.loading = true
        let _this = this

        setTimeout(function () {
          _this.axios.all([_this.getTestList()]).then(_this.axios.spread((acct) => {
            if (acct.data.ret) {
              _this.offset = _this.pageSize + _this.offset
              let newPage = acct.data.data.testList
              _this.testList = _this.testList.concat(newPage)
            }
          }))
          _this.$nextTick(function () {
            _this.loading = false
            _this.scroll.finishPullUp()
            _this.scroll.refresh()
          })
        }.bind(this), 700)
      }.bind(this))
    },
    methods: {
      getPsyTestInfo() {
        this.axios.all([this.getNav_Swiper(), this.getTestList()]).then(this.axios.spread((acct, perms) => {
          if (acct.data.ret && perms.data.ret) {
            this.offset = this.pageSize + this.offset
            this.swiper = acct.data.data.slider
            this.navList = acct.data.data.testNav
            this.testList = perms.data.data.testList
          }
        }))
      },

      changeList(id) {
        this.nid = id
        this.offset = 0
        this.axios.all([this.getTestList()]).then(this.axios.spread((acct) => {
          if (acct.data.ret) {
            this.offset = this.pageSize + this.offset
            this.testList = acct.data.data.testList
          }
        }))
      },

      getNav_Swiper() {
        return this.axios.get('/api/psyTest.json')
      },
      getTestList() {
        let nid = this.nid
        let offset = this.offset
        let pageSize = this.pageSize
        return this.axios.get(`/api/testList.json?id=${nid}&offset=${offset}&pagesize=${pageSize}`)
      },
    },
    components: {
      Swiper,
      NavList,
      TestList,
      Waiting
    }
  }
</script>

<style scoped>
  .scroll {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .grp {
    padding: 20px 26px;
  }

  .load {
    height: 100px;
    width: 100%;
    text-align: center;
    font-size: 28px;
    color: #333;
  }
</style>
